<template>
  <div class="container">
    <div class="form" v-if="step === 1">
      <div class="form-item">
        <input type="number" placeholder="请输入手机号码" v-model="phone" />
      </div>
      <div class="form-item">
        <input type="number" placeholder="请输入短信验证码" v-model="code" />
        <div class="form-codeBtn">
          <span v-if="!downShow" @click="getCode">获取验证码</span>
          <span v-else class="downNum-btn">重新发送（{{downNum+'s'}}）</span>
        </div>
      </div>
      <button @click="handleStep" :class="phone&&code ? 'login active' : 'login' ">下一步</button>
    </div>
    <div class="form" v-else>
      <div class="form-item">
        <input type="password" placeholder="设置6～18位新密码" v-model="pwd" />
      </div>
      <div class="form-item">
        <input type="password" placeholder="再次确认新密码" v-model="pwds" />
      </div>
      <button @click="_resetLoginPwd" :class="pwd&&pwds ? 'login active' : 'login' ">确定</button>
    </div>
  </div>
</template>

<script>
import { checkcurrentmobile, resetLoginPwd, sendSms } from "@/api/login";
import { Notify } from "vant";
export default {
  data() {
    return {
      phone: "",
      code: "",
      pwd: "",
      pwds: "",
      step: 1,
      downShow: false,
      timer: null,
      downNum: "",
    };
  },
  watch: {
    phone(val) {
      if (val.length >= 11) {
        this.phone = val.substring(0, 11);
      }
    },
    code(val) {
      if (val.length >= 6) {
        this.code = val.substring(0, 6);
      }
    },
    pwd(val) {
      if (val.length >= 18) {
        this.pwd = val.substring(0, 18);
      }
    },
    pwds(val) {
      if (val.length >= 18) {
        this.pwds = val.substring(0, 18);
      }
    },
  },
  methods: {
    // 设置新密码
    _resetLoginPwd() {
      if (this.pwd == "") {
        Notify({ type: "warning", message: "请输入新密码" });
      } else if (this.pwd.length < 6) {
        Notify({ type: "warning", message: "密码最少为六位" });
      } else if (this.pwds == "") {
        Notify({ type: "warning", message: "请输入确认密码" });
      } else if (this.pwd != this.pwds) {
        Notify({ type: "warning", message: "两次密码输入不一致" });
      } else {
        this.$toast.loading({
          duration: 0,
          message: "正在设置密码",
          forbidClick: true,
          loadingType: "spinner",
        });
        let req_data = {
          reqdata: JSON.stringify({
            t: `${new Date().getTime()}`,
            mobile: this.phone,
            new_password: this.pwd,
            code: this.code,
          }),
        };
        setTimeout(() => {
          resetLoginPwd(req_data)
            .then((res) => {
              if (res.code == 1) {
                Notify({
                  type: "success",
                  message: "设置成功，请使用新密码登录",
                });
                this.$router.push({
                  name: "login",
                });
              } else {
                Notify({ type: "warning", message: res.msg || "设置失败" });
              }
            })
            .finally(() => {
              this.$toast.clear();
            });
        }, 1500);
      }
    },
    // 下一步
    handleStep() {
      console.log(this.phone);
      const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (this.phone == "") {
        Notify({ type: "warning", message: "请输入手机号" });
      } else if (this.phone && !reg.test(this.phone)) {
        Notify({ type: "warning", message: "手机号码格式错误" });
      } else if (this.code == "") {
        Notify({ type: "warning", message: "请输入验证码" });
      } else {
        this.$toast.loading({
          duration: 0,
          message: "正在验证",
          forbidClick: true,
          loadingType: "spinner",
        });
        let req_data = {
          reqdata: JSON.stringify({
            t: `${new Date().getTime()}`,
            mobile: this.phone,
            code: this.code,
          }),
        };
        setTimeout(() => {
          checkcurrentmobile(req_data)
            .then((res) => {
              if (res.code == 1) {
                this.step = 2;
                Notify({ type: "success", message: "验证成功，请设置新密码" });
              } else {
                Notify({
                  type: "warning",
                  message: res.msg || "手机号码验证失败",
                });
              }
            })
            .finally(() => {
              this.$toast.clear();
            });
        }, 1500);
      }
    },
    // 获取验证码
    getCode() {
      const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (this.phone == "") {
        Notify({ type: "warning", message: "请输入手机号" });
      } else if (this.phone && !reg.test(this.phone)) {
        Notify({ type: "warning", message: "手机号码格式错误" });
      } else {
        let req_data = {
          reqdata: JSON.stringify({
            t: `${new Date().getTime()}`,
            mobile: this.phone,
            action: "forgetpwd",
          }),
        };
        sendSms(req_data).then((res) => {
          if (res.code == 1) {
            this.countDown();
            Notify({ type: "success", message: "发送成功，请注意查收短信" });
          } else {
            Notify({ type: "warning", message: res.msg || "发送失败" });
          }
        });
      }
    },
    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.downShow = true;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.container {
  width: 100vw;
  padding: 82px 50px 0 50px;
  .form-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 22px 0;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 68px;
    .form-codeBtn {
      font-size: 30px;
      font-weight: 400;
      color: #387eff;
      .downNum-btn {
        color: #c0c4cc;
      }
    }
    > input {
      font-size: 30px;
      color: #111111;
      &::placeholder {
        color: #cccccc;
      }
    }
    &:nth-of-type(2) {
      margin-bottom: 78px;
    }
  }
  .login {
    width: 650px;
    height: 90px;
    line-height: 90px;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(
      90deg,
      rgba(255, 212, 154, 1),
      rgba(255, 191, 163, 1)
    );
    border-radius: 4px;
    &.active {
      background: linear-gradient(
        90deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
    }
  }
}
</style>
